<template>
  <div
    ref="loginback"
    id="loginback">
    <div class="user"></div>
    <div class="name">Administrator</div>
    <div
      ref="loginBtn"
      id="login"
      @click.capture="login">
      登录
    </div>
    <a
      class="power"
      onclick="$(this).addClass('show')">
      <i
        class="bi bi-power"
        onclick="setTimeout(() => {window.location='shutdown.html';}, 200);"
        win12_title="关机"></i>
      <i
        class="bi bi-arrow-counterclockwise"
        onclick="setTimeout(() => {window.location='reload.html';}, 200);"
        win12_title="重启"></i>
    </a>
  </div>
</template>

<script setup lang="ts">
//  name > components > mixins > props > data > computed > watch > filter
import { ref, type Ref } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter()
const loginBtn: Ref<HTMLElement | null> = ref(null)
const loginback: Ref<HTMLElement | null> = ref(null)
const login = () => {
  if (loginBtn.value !== null) {
    loginBtn.value.id = 'login-after'
    loginBtn.value.innerText = '登录中...'
  }

  // document.querySelector('#loginback').removeChild(document.querySelector('#loginback .power'));
  var qwq = window.setInterval(() => {
    if (loginBtn?.value?.innerText.match(/\.\.\./)) {
      loginBtn!.value!.innerText = '登录中.'
    } else {
      loginBtn!.value!.innerText += '.'
    }
  }, 500)
  window.setTimeout(() => {
    loginBtn!.value!.style.transition = 'color 500ms'
  }, 100)
  window.setTimeout(() => {
    loginback.value?.classList.add('close')
    window.setTimeout(() => {
      loginback.value!.style.cssText += 'opacity:0'
    }, 500)
    window.setTimeout(() => {
      loginback.value!.style.cssText += 'display:none'
      window.clearInterval(qwq)
      route.push('/desktop')
    }, 2000)
  }, 1000)
}

// defineExpose({ login })
</script>

<style lang="scss" scoped>
#loginback {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background: linear-gradient(130deg, #ad6eca, #3b91d8); */
  background-image: url('../img/login.jpg'); /* Lucas Andrade, CC BY SA-4.0 */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transition:
    filter 500ms,
    background-color 500ms,
    opacity 1500ms ease-in-out;
  width: 100%;
  height: 100%;
}

#login {
  cursor: pointer;
  padding: 4px 50px 4px 50px;
  border: 2px solid #aaa;
  background-color: #eeeeee80;
  backdrop-filter: blur(10px) brightness(2);
  color: #121212;
  transition:
    background-color 300ms,
    transform cubic-bezier(0.14, 1.02, 0.17, 0.03) 300ms;
  font-size: 18px;
  border-radius: 10px;
}

#login:hover {
  background-color: #fafafa50;
}

#login:active {
  transform: scale(0.9);
}

#login-after {
  color: #fefefe;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin: 6px 0px 6px 0px;
}

#loginback > div.user {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-image: url('../icon/user.svg');
  background-size: 65% 65%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin-bottom: 10px;
  background-color: #ddd;
  transition: filter 500ms;
  margin-top: -35px;
}

#loginback > div.name {
  color: #fefefe;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 15px;
  transition: color 500ms;
}

#loginback.close,
#loginback.close > div.user {
  filter: brightness(0);
}

#loginback.close > div.name,
#loginback.close #login-after {
  color: #000 !important;
}

#loginback.close {
  background-color: black;
}

#loginback .power {
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 165px;
  justify-content: space-evenly;
  color: #fff;
  align-items: center;
}

#loginback .power > * {
  cursor: pointer;
  transition: all 300ms;
  font-size: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 7px;
  transition: transform cubic-bezier(0.14, 1.02, 0.17, 0.03) 300ms;
}

// #loginback .power > *:hover {
//   background-color: var(--card);
// }

#loginback .power > *:active {
  transform: scale(0.95);
}
</style>
